<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Css customization</title>
    <link rel="icon" href="../favicon.ico"/>

    <!-- Add Popoto default CSS styles -->
    <link rel="stylesheet" href="../node_modules/popoto/dist/popoto.min.css">
    <link rel="stylesheet" href="../shared.css">

    <style>
        body {
            font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #d2d5da;
            color: #333;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        .drawer {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 136px;
            bottom: 0;
            color: #bcc0c9;
            background-color: #30333a;
            text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
            overflow-y: auto;
            height: 100%;
            padding: 0 0 0 0;
        }

        .drawer h5 {
            padding: 0 0 0 10px;
            line-height: 39px;
            font-size: 13px;
            color: #fff;
            font-weight: 700;
            margin-bottom: 12px;
            margin-top: 0;
            border-bottom: 1px solid #424650;
        }

        .main {
            position: absolute;
            overflow: hidden;
            top: 0;
            bottom: 0;
            left: 136px;
            right: 0;
            z-index: 10;
            background-color: #d2d5da;
        }

        .frame {
            height: 550px;
            background-color: #F8F9FB;
            position: relative;
            top: 0;
            opacity: 1;
            max-height: 10000px;
            border-bottom: 1px solid #e6e9ef;
            overflow: hidden;
        }

        .frame:-webkit-full-screen {
            width: 100%;
            height: 100%;
        }

        .ppt-taxo-tag {
            display: none;
        }

        .ppt-taxo-ul {
            list-style-type: none;
            display: block;
            vertical-align: top;
            padding-left: 10px;
            margin: 0;
        }

        .ppt-taxo__span-icon:before {
            content: none;
        }

        .ppt-larrow {
            stroke: #9AA1AC;
            stroke-width: 2px;
            fill: #A5ABB6;
        }

        .ppt-rarrow {
            stroke: #9AA1AC;
            stroke-width: 2px;
            fill: #A5ABB6;
        }

        .ppt-larrow.enabled {
            fill: #68BDF6;
            stroke: #5CA8DB;
        }

        .ppt-rarrow.enabled {
            fill: #68BDF6;
            stroke: #5CA8DB;
        }

        .ppt-count-box.value {
            fill: #FB95AF;
            stroke: #E0849B;
            stroke-width: 2px;
        }

        .ppt-count-box.root {
            fill: #68BDF6;
            stroke: #5CA8DB;
            stroke-width: 2px;
        }

        .code-bar {
            background: #fff;
            color: #848790;
            line-height: 39px;
            padding-left: 10px;
            position: relative;
            border-bottom: 1px solid #e6e9ef;
        }

        .ppt-span, .ppt-span-link {
            color: #848790;
        }

        .notice-bar {
            color: #fff;
            background-color: #0e78b4;
            height: 39px;
            line-height: 39px;
            padding-left: 10px;
            position: relative;
            border-bottom: 1px solid #e6e9ef;
        }

        .prompt {
            margin-right: 5px;
            opacity: .5;
            -ms-filter: "alpha(Opacity=50)";
            filter: alpha(opacity=50);
            font-weight: 700;
        }

        .ppt-node-background-circle {
            fill: #fdcc59;
        }

        .table-holder {
            max-height: 464px;
            min-height: 151px;
            overflow: auto;
            background: #fff;
        }

        .ppt-result {
            background-color: #fff;
            border-bottom: 1px solid #ebecec;
            vertical-align: top;
            line-height: 26px;
            padding: 0 16px;
        }

        .ppt-result:hover {
            background-color: #fff;
        }

        table.json-object {
            background-color: #eee;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            margin: 20px 10px;
        }

        table.json-object tbody tr td, table.json-object tbody tr th {
            border-bottom: 0;
            color: #666;
            line-height: 26px;
            padding: 2px 10px;
            max-width: 320px;
        }

        ul {
            list-style-type: none;
            display: block;
            vertical-align: top; /* | top | bottom */
            padding: 0 0 0 10px;
            margin: 0;
        }

        li {
            text-align: center;
            display: block;
            width: 100px;
            color: #30333a;
            background-color: #9195a0;
            text-shadow: none;
            margin-right: 6px;
            margin-bottom: 6px;
            margin-top: 6px;
            padding: 4px 7px 4px 9px;
            border-radius: 20px;
        }

        li:hover {
            background-color: #fff;
        }

        li img {
            display: none;
            vertical-align: middle; /* | top | bottom */
        }

        .ppt-count {
            cursor: pointer;
            color: #30333a;
        }

        .ppt-label:hover {
            color: #30333a;
        }

        .ppt-node-background-circle.disabled {
            fill: #c4c4c4;
        }

        .ppt-link-relation.disabled {
            stroke: #D3D3D3;
            stroke-width: 1px;
            stroke-dasharray: 500;
        }

        .ppt-link-text-relation.disabled {
            fill: #d3d3d3;
            font-size: 10px;
        }

        .ppt-count-box.value.disabled {
            fill: #D3D3D3;
            stroke: #c7c7c7;
            stroke-width: 2px;
            opacity: 0.8;
        }

        .ppt-node-ellipse.choose.disabled {
            fill: #D3D3D3;
            stroke: #c7c7c7;
        }
    </style>
</head>
<body>
<div id="popoto-taxonomy" class="drawer">
    <h5>Node labels</h5>
    <!-- Label/taxonomy filter will be generated here -->
</div>
<div id="main" class="main">
    <div class="notice-bar">
        Popoto.js CSS customization example using <a href="http://neo4j.com/" style="color: #0ebcff;">Neo4j</a> like web
        browser CSS style.
    </div>
    <div class="code-bar">
        Tips: Right click on a node to retrieve the relations. Use left click to expand and select a value. Right click
        can also be used to remove a selection.
    </div>
    <div class="code-bar" id="popoto-cypher">
    </div>
    <div class="frame" id="popoto-graph">
        <!-- Graph will be generated here-->
    </div>
    <div class="code-bar" id="count">
        Returned <span id="rescount">0</span> rows
    </div>
    <div id="popoto-results" class="table-holder">
        <!-- Results will be generated here -->
    </div>
</div>

<!-- Required scripts -->
<script src="../shared.js" charset="utf-8"></script>
<script src="../node_modules/d3/dist/d3.min.js" charset="utf-8"></script>
<script src="../node_modules/neo4j-driver-lite/lib/browser/neo4j-lite-web.min.js" charset="utf-8"></script>
<script src="../node_modules/popoto/dist/popoto.min.js" charset="utf-8"></script>
<script>

    var driver = neo4j.driver(
        "neo4j+s://dff437fa.databases.neo4j.io",
        neo4j.auth.basic("popoto", "popotopassword"),
    );

    popoto.runner.DRIVER = driver

    popoto.graph.link.SHOW_MARKER = true;
    // Disable toggle taxonomy tool button
    popoto.tools.TOGGLE_TAXONOMY = false;

    popoto.graph.node.NODE_MAX_CHARS = 13;

    // Define the list of label provider to customize the graph behavior:
    popoto.provider.node.Provider = {
        "Movie": {
            "returnAttributes": ["title", "released", "tagline"],
            "constraintAttribute": "title",
            "displayResults": function (pResultElmt) {
                var tbody = pResultElmt.append("table").attr("class", "json-object").append("tbody");
                var titletr = tbody.append("tr");
                titletr.append("th").text("title");
                titletr.append("td").text(function (result) {
                    return result.attributes.title;
                });

                var releasetr = tbody.filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.release;
                }).append("tr");
                releasetr.append("th").text("release");
                releasetr.append("td").text(function (result) {
                    return result.attributes.release;
                });

                var taglineTr = tbody.filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.tagline;
                }).append("tr");
                taglineTr.append("th").text("tagline");
                taglineTr.append("td").text(function (result) {
                    return result.attributes.tagline;
                });
            }
        },
        "Person": {
            "returnAttributes": ["name", "born"],
            "constraintAttribute": "name",
            "displayResults": function (pResultElmt) {

                var tbody = pResultElmt.append("table").attr("class", "json-object").append("tbody");
                var nametr = tbody.append("tr");
                nametr.append("th").text("name");
                nametr.append("td").text(function (result) {
                    return result.attributes.name;
                });

                var borntr = tbody.filter(function (result) {
                    // Filter on attribute having born attribute value
                    return result.attributes.born;
                }).append("tr");
                borntr.append("th").text("born");
                borntr.append("td").text(function (result) {
                    return result.attributes.born;
                });
            }
        }
    };

    popoto.provider.link.Provider = {
        "getColor": function (link) {
            if (link.type === popoto.graph.link.LinkTypes.RELATION || link.type === popoto.graph.link.LinkTypes.SEGMENT) {
                switch (link.label) {
                    case "ACTED_IN":
                        return "#68BDF6";
                    case "DIRECTED":
                        return "#6DCE9E";
                    case "PRODUCED":
                        return "#FF756E";
                    case "WROTE":
                        return "#f0b017";
                    case "FOLLOWS":
                        return "#DE9BF9";
                    case "REVIEWED":
                        return "#A5ABB6";
                    default :
                        return "#525863"
                }
            } else {
                return "#A5ABB6";
            }
        }
    };

    popoto.provider.node.DEFAULT_PROVIDER.getColor = function (node) {
        if (node.type !== popoto.graph.node.NodeTypes.ROOT) {
            var linknode = node;
            if (node.type === popoto.graph.node.NodeTypes.VALUE) {
                linknode = node.parent;
            }
            var color = "#A5ABB6";
            if (linknode.parentRel !== undefined) {
                color = popoto.provider.link.getColor({
                    label: linknode.parentRel,
                    source: linknode.parent,
                    target: linknode,
                    type: popoto.graph.link.LinkTypes.RELATION
                });
            }
            return color;
        } else {
            return "#A5ABB6";
        }
    };


    // Change the number of displayed results:
    popoto.query.RESULTS_PAGE_SIZE = 25;

    // Add a listener on returned result count to update count in page
    popoto.result.onTotalResultCount(function (count) {
        d3.select("#rescount").text(function (d) {
            return "" + count;
        })
    });

    driver.verifyConnectivity().then(function () {
        // Start the generation using parameter as root label of the query.
        popoto.start("Person");
    }).catch(function (error) {
        document.getElementById("modal").style.display = "block";
        document.getElementById("error-content").innerText = error;
        console.error(error)
    })

</script>
</body>
</html>
